<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人主页</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="return">
        <a href="#top"><img src="images/top.png" alt=""></a>
        <p>return</p>
    </div>
    <div class="top" name="top">
        <div class="header">
            <div class="nav">
                <div class="nav-left">
                    <a href="#"><img src="images/wu.png" alt=""></a>
                    <span>WU</span>
                </div>
                <div class="nav-right">
                    <ul>
                        <li><a href="#top">HOME</a></li>
                        <li><a href="#me">ME</a></li>
                        <li><a href="#myhobby">HOBBY</a></li>
                        <li><a href="#work">WORK</a></li>
                        <li><a href="#contact">CONTACT</a></li>       
                    </ul>
                </div>
            </div>
        </div>
        <h1 class="words">
            <span>
                向这太阳努力冲<br>
                抓住心里的那一抹橙色
            </span>
        </h1>
    </div>

    <div class="title-me" >
        <a name="me">ABOUT ME</a>
    </div>
    <div class="me">
        <ul>
            <li class="me-logo"><img src="images/wu.png" alt="" class="aboutme-logo"></li>
            <li class="me-content">
                <ul class="me-name">
                    <li>姓名：吴子娟</li>
                    <li>年龄：20</li>
                    <li>籍贯：湖北</li>
                    <li>学校：武汉工程大学</li>
                    <li>专业：数字媒体技术</li>
                    <li>邮箱：3238655332@qq.com</li>                            
                </ul>
                <ul class="me-intro">
                    <li class="self">INTRODUCTION</li>
                    <li>
                        数字媒体技术专业大三学生，近期学习了HTML5以及CSS相关知识，比较熟练地掌握了各种静态页面及部分动态页面的实现，并完成本次个人介绍页面的设计。
                    </li>       
                </ul>   
            </li>
        </ul>
    </div>  

    
    <div class="myhobby">
        <div class="title-hobby">
            <a name="myhobby">MY HOBBY</a>
            <p>我的兴趣爱好有四样，分别是滑板、萌宠、阅读和摄影。</p>
        </div>
        <ul>
            <li class="mh-img"><img src="images/huaban.jpg" alt=""></li>
            <li><img src="images/cat.jpg" alt=""></li>
        </ul>
        <ul>
            <li class="mh-img"><img src="images/read.jpg" alt=""></li>
            <li><img src="images/photo.jpg" alt=""></li>
        </ul>
    </div>
    
    
    <div class="work">
        <div class="works clear">
            <div class="title-line">
                <div class="title-work">
                    <a name="work">MY WORK</a>
                </div>
            </div>
            
            <div class="row">
                <p>生活</p>
                <a href="https://aoyixixi.gitee.io/one" target="blank"><img src="images/day01.png" alt=""></a>
            </div>  
            <div class="row">
                <p>个人网站</p>
                <a href="https://aoyixixi.gitee.io/two" target="blank"><img src="images/day02.png" alt=""></a>
            </div>                     
            <div class="row">
                <p>广州远大</p>                          
                <a href="https://aoyixixi.gitee.io/three" target="blank"><img src="images/day03.png" alt=""></a>
            </div>
            <div class="row">
                <p>家居医生</p>
                <a href="https://aoyixixi.gitee.io/four" target="blank"><img src="images/day04.png" alt=""></a>
            </div>
            <div class="row">
                <p>家居地板</p>
                <a href="https://aoyixixi.gitee.io/five" target="blank"><img src="images/home+.png" alt=""></a>
            </div>
                        
        </div>
        <div class="works clear">
            <div class="row">
                <p>百度</p>
                <a href=" https://aoyixixi.gitee.io/six" target="blank"><img src="images/baidu.png" alt=""></a>
            </div> 
            <div class="row">
                <p>小米登录</p>
                <a href="https://aoyixixi.gitee.io/seven7" target="blank"><img src="images/mi.png" alt=""></a> 
            </div> 
            <div class="row">
                <p>轮播</p>
                <a href=" https://aoyixixi.gitee.io/homework6.14" target="blank"><img src="images/banner.png" alt=""></a> 
            </div>       
            <div class="row">
                <p>木兮地板</p>
                <a href="https://aoyixixi.gitee.io/homework0612" target="blank"><img src="images/muxi.png" alt=""></a> 
            </div>
            <div class="row">
                <p>小米官网</p>
                <a href="https://aoyixixi.gitee.io/homework6.17" target="blank"><img src="images/Mi2.png" alt=""></a>            
            </div>
                  
        </div>
    </div>
    <div class="contact-color">
        <div class="title-contact" >
            <a name="contact">CONTACT ME</a>
        </div>
        <div class="contact">
            <a href=""><img src="images/wu.png" alt="" class="c1"></a>
            <img src="images/qq.jpg" alt="" class="c2">
            <img src="images/wechat.png" alt="" class="c3">
            <div class="message">
                <input type="text" id="name" placeholder="姓名">
                <input type="text" id="mail" placeholder="邮箱">
                <input type="text" id="massage" placeholder="你的信息">
                <button>发送</button>
            </div>
        </div>
    </div>
    
    <div class="foot">
        <p>解释权归吴子娟</p>
    </div>
</body>
</html>